<template>
  <div class="manylist">
    <!-- 表格 -->
    <el-table
      :data="$attrs.list"
      border
      style="width: 100%"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-table-column type="expand" label="">
        <template slot-scope="scope">
          <el-tag
            :key="tag"
            v-for="(tag, i) in scope.row.attr_vals"
            closable
            :disable-transitions="false"
            @close="handleClose(i, scope.row)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="scope.row.inputVisible"
            v-model="scope.row.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(scope.row)"
            @blur="handleInputConfirm(scope.row)"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput(scope.row)"
            >+ New Tag</el-button
          >
        </template>
      </el-table-column>

      <el-table-column type="index" width="50" label="#"></el-table-column>
      <el-table-column label="参数名称" prop="attr_name"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="editClick(scope.row)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            >编辑</el-button
          >

          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="delClick(scope.row, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { Deletemany, Manyedit } from "../utils/http";
export default {
  data() {
    return {};
  },
  created() {
    console.log(this.$attrs);
    console.log(this.$listeners);
  },
  methods: {
    handleClose(i, row) {
      // console.log(i,row);
      row.attr_vals.splice(i, 1);
      this.setAttr_vale(row);
    },
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    editClick(row) {
      this.$emit("editClick", row);
    },
    //delClick动态参数删除
    delClick(row, index) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Deletemany({ cat_id: row.cat_id, attr_id: row.attr_id }).then(
            (res) => {
              //   console.log(res);
              //   this.handleChange();
              this.$attrs.list.splice(index, 1);
            }
          );
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleInputConfirm(row) {
      if (row.inputValue.trim().length === 0) {
        row.inputValue = "";
        row.inputVisible = false;
        return;
      }
      row.attr_vals.push(row.inputValue.trim());
      row.inputValue = "";
      row.inputVisible = false;
      this.setAttr_vale(row);
    },
    setAttr_vale(row) {
      let obj = {
        cat_id: row.cat_id,
        attr_name: row.attr_name,
        attr_sel: row.attr_sel,
        attr_vals: row.attr_vals.join(" "),
        attr_id: row.attr_id,
      };

      Manyedit(obj).then((res) => {
        if (res.meta.status == 200) {
          this.handleChange();
          // this.getList()
          this.$message({
            type: "success",
            message: res.meta.msg,
          });
        } else {
          this.$message({
            type: "danger",
            message: res.meta.msg,
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>